<template>
    <div>
        <h3 style="text-align: left; margin-left: 30px;">对局信息</h3>
        <el-row class="mb-4">
            <el-button style="display: block; margin-left: 30px;" type="success"
                @click.prevent="addRow(tableData)">新增对局记录</el-button>
            <el-button style="display: block; margin-left: 30px;" type="primary"
                @click.prevent="initCollections">初始化数据</el-button>
        </el-row>
        <el-table :data="tableData" :border="parentBorder" style="width: 100%" @cell-click="headerOpenEditColumn"
            :row-class-name="headerTableRowClassName" :default-expand-all="true">
            <el-table-column type="expand">
                <template #default="lolBattleHeader">
                    <div m="4" style="margin-left: 30px; width: 100%;">
                        <h3>对局队伍信息</h3>
                        <!-- <el-button style="display: block; margin-left: 30px;" type="danger" @click.prevent="addRow">新增对局队伍记录</el-button> -->
                        <el-table :data="lolBattleHeader.row.lolBattleTeamList" :border="childBorder"
                            :row-class-name="teamTableRowClassName" style="width: 100%" @cell-click="teamOpenEditColumn"
                            :default-expand-all="true">
                            <el-table-column type="expand">
                                <template #default="lolBattleTeam">
                                    <div m="4" style="margin-left: 30px; width: 100%;">
                                        <h3>对局英雄信息</h3>
                                        <!-- <el-button style="display: block; margin-left: 30px;" type="danger" @click.prevent="addRow">新增对局英雄记录</el-button> -->
                                        <el-table :data="lolBattleTeam.row.lolBattleChampionList"
                                            @cell-click="championOpenEditColumn" :border="childBorder"
                                            style="width: 100%">
                                            <el-table-column label="MongoDB ID" prop="id" v-if="false" />
                                            <el-table-column label="对局ID" prop="gameId" v-if="false" />
                                            <el-table-column label="英雄称号" prop="name" />
                                            <el-table-column label="队伍" prop="team" />
                                            <el-table-column label="位置" prop="position" />
                                            <el-table-column label="击杀小兵数" prop="allMinionsKilled">
                                                <template #default="scope">
                                                    <span v-show="!scope.row.isEdit">{{ scope.row.allMinionsKilled
                                                    }}</span>
                                                    <el-input
                                                        @blur="championEditColumnData(scope.row, 'allMinionsKilled')"
                                                        @keyup.enter="championEditColumnData(scope.row, 'allMinionsKilled')"
                                                        v-show="scope.row.isEdit" size="small"
                                                        v-model="scope.row.allMinionsKilled"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="对英雄造成的总伤害" prop="totalDamageToChampions">
                                                <template #default="scope">
                                                    <span v-show="!scope.row.isEdit">{{ scope.row.totalDamageToChampions
                                                    }}</span>
                                                    <el-input
                                                        @blur="championEditColumnData(scope.row, 'totalDamageToChampions')"
                                                        @keyup.enter="championEditColumnData(scope.row, 'totalDamageToChampions')"
                                                        v-show="scope.row.isEdit" size="small"
                                                        v-model="scope.row.totalDamageToChampions"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="对英雄造成的物理伤害" prop="physicalDamageToChampions">
                                                <template #default="scope">
                                                    <span v-show="!scope.row.isEdit">{{
                                                            scope.row.physicalDamageToChampions
                                                    }}</span>
                                                    <el-input
                                                        @blur="championEditColumnData(scope.row, 'physicalDamageToChampions')"
                                                        @keyup.enter="championEditColumnData(scope.row, 'physicalDamageToChampions')"
                                                        v-show="scope.row.isEdit" size="small"
                                                        v-model="scope.row.physicalDamageToChampions"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="对英雄造成的魔法伤害" prop="magicDamageToChampions">
                                                <template #default="scope">
                                                    <span v-show="!scope.row.isEdit">{{ scope.row.magicDamageToChampions
                                                    }}</span>
                                                    <el-input
                                                        @blur="championEditColumnData(scope.row, 'magicDamageToChampions')"
                                                        @keyup.enter="championEditColumnData(scope.row, 'magicDamageToChampions')"
                                                        v-show="scope.row.isEdit" size="small"
                                                        v-model="scope.row.magicDamageToChampions"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="总输出伤害" prop="totalDamageDealt">
                                                <template #default="scope">
                                                    <span v-show="!scope.row.isEdit">{{
                                                            scope.row.totalDamageDealt
                                                    }}</span>
                                                    <el-input
                                                        @blur="championEditColumnData(scope.row, 'totalDamageDealt')"
                                                        @keyup.enter="championEditColumnData(scope.row, 'totalDamageDealt')"
                                                        v-show="scope.row.isEdit" size="small"
                                                        v-model="scope.row.totalDamageDealt"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column fixed="right" label="操作">
                                                <template #default="scope">
                                                    <el-button link type="primary" size="small"
                                                        @click.prevent="updateLolBattleChampionDocument(scope.row)">
                                                        编辑
                                                    </el-button>
                                                    <el-button link type="primary" size="small"
                                                        @click.prevent="deleteLolBattleChampion(scope.row)">
                                                        删除
                                                    </el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="MongoDB ID" prop="id" v-if="false" />
                            <el-table-column label="对局ID" prop="gameId" v-if="false" />
                            <el-table-column label="队伍" prop="team" />
                            <el-table-column label="队伍总击杀数" prop="totalKills">
                                <template #default="scope">
                                    <span v-show="!scope.row.isEdit">{{ scope.row.totalKills }}</span>
                                    <el-input @blur="teamEditColumnData(scope.row, 'totalKills')"
                                        @keyup.enter="teamEditColumnData(scope.row, 'totalKills')"
                                        v-show="scope.row.isEdit" size="small"
                                        v-model="scope.row.totalKills"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="队伍总死亡数" prop="totalDeaths">
                                <template #default="scope">
                                    <span v-show="!scope.row.isEdit">{{ scope.row.totalDeaths }}</span>
                                    <el-input @blur="teamEditColumnData(scope.row, 'totalDeaths')"
                                        @keyup.enter="teamEditColumnData(scope.row, 'totalDeaths')"
                                        v-show="scope.row.isEdit" size="small"
                                        v-model="scope.row.totalDeaths"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="队伍总助攻数" prop="totalAssists">
                                <template #default="scope">
                                    <span v-show="!scope.row.isEdit">{{ scope.row.totalAssists }}</span>
                                    <el-input @blur="teamEditColumnData(scope.row, 'totalAssists')"
                                        @keyup.enter="teamEditColumnData(scope.row, 'totalAssists')"
                                        v-show="scope.row.isEdit" size="small"
                                        v-model="scope.row.totalAssists"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作">
                                <template #default="scope">
                                    <el-button link type="primary" size="small"
                                        @click.prevent="updateLolBattleTeamDocument(scope.row)">
                                        编辑
                                    </el-button>
                                    <el-button link type="primary" size="small"
                                        @click.prevent="deleteLolBattleTeam(scope.row)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="MongoDB ID" prop="id" v-if="false" />
            <el-table-column label="对局ID" prop="gameId">
                <template #default="scope">
                    <span v-show="!scope.row.isEdit">{{ scope.row.gameId }}</span>
                    <el-input @blur="headerEditColumnData(scope.row, 'gameId')"
                        @keyup.enter="headerEditColumnData(scope.row, 'gameId')" v-show="scope.row.isEdit" size="small"
                        v-model="scope.row.gameId"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="游戏模式" prop="gameMode">
                <template #default="scope">
                    <span v-show="!scope.row.isEdit">{{ scope.row.gameMode }}</span>
                    <el-input @blur="headerEditColumnData(scope.row, 'gameMode')"
                        @keyup.enter="headerEditColumnData(scope.row, 'gameMode')" v-show="scope.row.isEdit"
                        size="small" v-model="scope.row.gameMode"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="游戏开始时间" prop="gameStartTime" :formatter="formatTime" />
            <el-table-column label="游戏版本" prop="gameServerVersion">
                <template #default="scope">
                    <span v-show="!scope.row.isEdit">{{ scope.row.gameServerVersion }}</span>
                    <el-input @blur="headerEditColumnData(scope.row, 'gameServerVersion')"
                        @keyup.enter="headerEditColumnData(scope.row, 'gameServerVersion')" v-show="scope.row.isEdit"
                        size="small" v-model="scope.row.gameServerVersion"></el-input>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button link type="primary" size="small" v-if="scope.row.id != null"
                        @click.prevent="updateLolBattleHeaderDocument(scope.row)">编辑</el-button>
                    <el-button link type="primary" size="small" v-if="scope.row.id != null"
                        @click.prevent="deleteLolBattleHeader(scope.row)">删除</el-button>
                    <el-button link type="primary" size="small" v-if="scope.row.id == null"
                        @click.prevent="insertLolBattleHeaderDocument(scope.row)">新增</el-button>
                    <el-button link type="primary" size="small" v-if="scope.row.id == null"
                        @click.prevent="removeRow(scope)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { ref } from 'vue'
import api from '@/router/request.js'
import qs from 'qs'
import router from '@/router/index.js'
import { now } from 'lodash'
export default {
    components: [router, ref, api, qs],
    data() {
        return {
            parentBorder: ref(true),
            childBorder: ref(true),
            tableData: [],
            expandedRowKeyArr: []
        }
    },
    mounted() {
        this.getLolBattleFromMongoDb();
    },
    methods: {
        // 从MongoDB联表查询对局记录、队伍、英雄数据
        getLolBattleFromMongoDb() {
            api({
                url: '/mongoSubjectController/getLolBattleFromMongoDb',
                method: 'get'
            }).then((response) => {
                var resList = response.data
                this.tableData = resList;
            })
        },
        //初始化数据
        initCollections() {
            api({
                url: '/mongoSubjectController/initCollections',
                method: 'get',
            }).then(() => {
                this.getLolBattleFromMongoDb();
            })
        },
        // 插入对局记录行
        addRow(coll) {
            let obj = {
                gameStartTime: now()
            };
            coll.push(obj);
        },
        // 删除对局记录行
        removeRow() {
            this.tableData.splice(this.tableData.length - 1, 1);
        },
        // 插入对局记录
        insertLolBattleHeaderDocument(scope) {
            api({
                url: '/mongoSubjectController/insertLolBattleHeaderDocument',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: {
                    gameId: scope.gameId,
                    gameMode: scope.gameMode,
                    gameStartTime: scope.gameStartTime,
                    gameServerVersion: scope.gameServerVersion
                }
            }).then(() => {
                this.getLolBattleFromMongoDb();
            })
        },
        // 删除对局记录
        deleteLolBattleHeader(scope) {
            api({
                url: '/mongoSubjectController/deleteLolBattleHeader',
                method: 'post',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                params: {
                    gameId: scope.gameId
                }
            }).then(() => {
                this.getLolBattleFromMongoDb();
            })
        },
        // 删除对局队伍
        deleteLolBattleTeam(scope) {
            api({
                url: '/mongoSubjectController/deleteLolBattleTeam',
                method: 'post',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                params: {
                    id: scope.id,
                    gameId: scope.gameId,
                    team: scope.team
                }
            }).then(() => {
                this.getLolBattleFromMongoDb();
            })
        },
        // 删除对局英雄
        deleteLolBattleChampion(scope) {
            api({
                url: '/mongoSubjectController/deleteLolBattleChampion',
                method: 'post',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                params: {
                    gameId: scope.gameId,
                    id: scope.id
                }
            }
            ).then(() => {
                this.getLolBattleFromMongoDb();
            })
            // this.tableData.value.splice(index, 1)
        },
        // 对局信息-打开信息编辑
        headerOpenEditColumn(row, column) {
            if (row.id == null && column.property === "gameId") {
                this.tableData.forEach(item => {
                    if (item.id === row.id) {
                        // 激活当前点击的单元格进入可以编辑（span与el-input标签显示隐藏切换）
                        item.isEdit = true
                    }
                });
            } else if (column.property === "gameMode") {
                this.tableData.forEach(item => {
                    if (item.id === row.id) {
                        // 激活当前点击的单元格进入可以编辑（span与el-input标签显示隐藏切换）
                        item.isEdit = true
                    }
                });
            } else if (column.property === "gameServerVersion") {
                this.tableData.forEach(item => {
                    if (item.id === row.id) {
                        item.isEdit = true
                    }
                });
            }
        },
        // 对局信息-表格数据编辑保存并关闭编辑
        headerEditColumnData(row, column) {
            // 关闭表格编辑
            this.tableData.forEach(item => {
                if (item.id === row.id) {
                    if (column === "gameId") {
                        item.isEdit = false;
                    } else if (column === "gameMode") {
                        item.isEdit = false;
                    } else if (column === "gameServerVersion") {
                        item.isEdit = false;
                    }
                }
            });
        },
        // 对局队伍-打开信息编辑
        teamOpenEditColumn(row, column) {
            if (column.property === "totalKills") {
                row.isEdit = true
            } else if (column.property === "totalAssists") {
                row.isEdit = true
            } else if (column.property === "totalDeaths") {
                row.isEdit = true
            }
        },
        // 对局队伍-表格数据编辑保存并关闭编辑
        teamEditColumnData(row, column) {
            // 关闭表格编辑
            if (column === "totalKills") {
                row.isEdit = false
            } else if (column === "totalAssists") {
                row.isEdit = false
            } else if (column === "totalDeaths") {
                row.isEdit = false
            }
        },
        // 对局队伍-打开信息编辑
        championOpenEditColumn(row, column) {
            if (column.property === "allMinionsKilled") {
                row.isEdit = true
            } else if (column.property === "totalDamageToChampions") {
                row.isEdit = true
            } else if (column.property === "physicalDamageToChampions") {
                row.isEdit = true
            } else if (column.property === "magicDamageToChampions") {
                row.isEdit = true
            } else if (column.property === "totalDamageDealt") {
                row.isEdit = true
            }
        },
        // 对局队伍-表格数据编辑保存并关闭编辑
        championEditColumnData(row, column) {
            // 关闭表格编辑
            if (column === "allMinionsKilled") {
                row.isEdit = false
            } else if (column === "totalDamageToChampions") {
                row.isEdit = false
            } else if (column === "physicalDamageToChampions") {
                row.isEdit = false
            } else if (column === "magicDamageToChampions") {
                row.isEdit = false
            } else if (column === "totalDamageDealt") {
                row.isEdit = false
            }
        },
        // 更改对局记录
        updateLolBattleHeaderDocument(row) {
            api({
                url: '/mongoSubjectController/updateLolBattleHeaderDocument',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: {
                    id: row.id,
                    gameId: row.gameId,
                    gameMode: row.gameMode,
                    gameStartTime: row.gameStartTime,
                    gameServerVersion: row.gameServerVersion
                }
            }
            ).then(() => {
                this.getLolBattleFromMongoDb();
            })
        },
        // 更改对局队伍
        updateLolBattleTeamDocument(row) {
            api({
                url: '/mongoSubjectController/updateLolBattleTeamDocument',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: {
                    id: row.id,
                    gameId: row.gameId,
                    team: row.team,
                    totalKills: row.totalKills,
                    totalAssists: row.totalAssists,
                    totalDeaths: row.totalDeaths
                }
            }
            ).then(() => {
                this.getLolBattleFromMongoDb();
            })
        },
        // 更改对局队伍
        updateLolBattleChampionDocument(row) {
            api({
                url: '/mongoSubjectController/updateLolBattleChampionDocument',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: {
                    id: row.id,
                    gameId: row.gameId,
                    name: row.name,
                    team: row.team,
                    position: row.position,
                    allMinionsKilled: row.allMinionsKilled,
                    totalDamageToChampions: row.totalDamageToChampions,
                    physicalDamageToChampions: row.physicalDamageToChampions,
                    magicDamageToChampions: row.magicDamageToChampions,
                    totalDamageDealt: row.totalDamageDealt
                }
            }
            ).then(() => {
                this.getLolBattleFromMongoDb();
            })
        },
        // 日期格式化
        formatTime(row, column) {
            let data = row[column.property]
            let dtime = new Date(data)
            const year = dtime.getFullYear()
            let month = dtime.getMonth() + 1
            if (month < 10) {
                month = '0' + month
            }
            let day = dtime.getDate()
            if (day < 10) {
                day = '0' + day
            }
            let hour = dtime.getHours()
            if (hour < 10) {
                hour = '0' + hour
            }
            let minute = dtime.getMinutes()
            if (minute < 10) {
                minute = '0' + minute
            }
            let second = dtime.getSeconds()
            if (second < 10) {
                second = '0' + second
            }
            return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second

        },
        // 交替显示对局信息行的颜色
        headerTableRowClassName(row) {
            if (row.rowIndex % 2 === 0) {
                return 'warning-row'
            } else if (row.rowIndex % 2 === 1) {
                return 'success-row'
            }
            return ''
        },
        // 交替显示对局信息行的颜色
        teamTableRowClassName(row) {
            if (row.row.team === '红色方') {
                return 'red-row'
            } else if (row.row.team === '蓝色方') {
                return 'blue-row'
            }
            return 'info-row'
        }
    },

}
</script>
<style>
.el-input {
    width: 100%;
}

.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-5);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-5);
}

.el-table .blue-row {
    --el-table-tr-bg-color: var(--el-color-primary-light-5);
}

.el-table .red-row {
    --el-table-tr-bg-color: var(--el-color-danger-light-5);
}

.el-table .info-row {
    --el-table-tr-bg-color: var(--el-color-info-light-5);
}
</style>